<template>
  <div id="RoomGroupingSetting">
    <div class="content">
      <div class="overflow-auto">
        <div class="body">
          <!-- 右上角按钮 -->
          <div class="flex_btn" v-if="edit == false">
            <el-button size="small" @click="editGrouping">编辑</el-button>
          </div>
          <div class="flex_btn" v-else-if="edit == true">
            <el-button size="small" type="primary" @click="save">保存</el-button>
            <el-button size="small" @click="cancelEdit" style="margin-right:20px">取消</el-button>
          </div>
          <!-- END右上角按钮 -->

          <!-- 非编辑状态 -->
          <div class="grouping" v-if="edit != true">
            <div class="title">
              <div class="name">分组名称</div>
              <div class="roomName">房间号</div>
            </div>
            <div class="grouping_content" v-for=" (group, index) in roomArr" :key="index">
              <!-- 分组名---左 -->
              <div class="name">
                <span>{{ group.name }}</span>
              </div>
              <!-- 分组名---右 -->
              <draggable class="roomName" v-model="group.children" :group="groupA" @start="onStart(group)" @end="onEnd">
                <transition-group :style="style">
                  <div class="room" v-for="(room, index) in group.children " :key="index">
                    <div>{{ room.room_num }}</div>
                    <div style="margin-top:5px;">{{ room.pms_title }}</div>
                  </div>
                </transition-group>
              </draggable>
            </div>

            <!-- 点击编辑后要修改的 -->
            <div class=""></div>
            <div class="addGrouping" v-if="edit == true">
              <span>
                <el-button type="text" icon="el-icon-plus">新增分组</el-button>
              </span>
            </div>
          </div>

          <!-- 编辑状态 -->
          <div class="grouping" v-else-if="edit">
            <div class="title">
              <div class="name">分组名称</div>
              <div class="roomName">房间号</div>
            </div>
            <div class="grouping_content" v-for="(group, index) in roomArr" :key="index">
              <div class="name">
                <el-input v-model="group.name" style="width:80%;">
                </el-input>
                <el-button type="text" style="margin-left:10px" @click="addGroup(group, index)">
                  <i class="el-icon-check" style="color:#15d915" v-if="!group.id"></i>
                </el-button>
                <el-button type="text" style="margin-left:10px" @click="delGrouping(group, index)">
                  <i class="el-icon-close" style="color:red"></i>
                </el-button>
              </div>
              <draggable class="roomName" v-model="group.children" :group="groupA" @start="onStart(group)" @end="onEnd">
                <transition-group :style="style">
                  <div class="room" v-for="(room, index) in group.children " :key="index">
                    <div>{{ room.room_num }}</div>
                    <div style="margin-top:5px;">{{ room.pms_title }}</div>
                  </div>
                </transition-group>
              </draggable>
            </div>

            <!-- 点击编辑后要修改的 新增分组-->
            <div class=""></div>
            <div class="addGrouping" v-if="edit == true">
              <span>
                <el-button type="text" icon="el-icon-plus" @click="addGrouping">新增分组</el-button>
              </span>
            </div>
          </div>


          <!--  未分组的房间 -->
          <div class="ungrouped">
            <div class="title">未分组房间 <span style="font-size:12px;color: #909399;">编辑状态时，拖拽房间号即可选择该房间归属的分组</span></div>
            <draggable class="ungrouped_content" v-model="ungroupedArr" :group="groupB">
              <transition-group :style="style">
                <div class="room" v-for="(room, index) in ungroupedArr " :key="index">
                  <div>{{ room.room_num }}</div>
                  <div style="margin-top:5px;">{{ room.pms_title }}</div>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  RoomGroup,
  GetRoomIDGroup,
  EditRoomGroup
} from '@/api/hotel'
export default {
  Name: 'RoomGroupingSetting',
  components: {
    draggable
  },
  data() {
    return {
      edit: false,
      drag: false,
      style: 'min-height:60px;display: block;',
      // 分组
      groupA: {
        name: 'site',
        pull: false, //可以拖从
        put: false//可以拖出
      },
      // 未分组
      groupB: {
        name: 'site',
        pull: false,
        put: false
      },
      roomArr: [],
      // 未分组的
      ungroupedArr: [],
      hotel_id: ''
    }
  },
  created() {
    this.hotel_id = sessionStorage.getItem('hotel_id')
    this.GetAllRoomGroup()

  },
  methods: {
    // 保存
    async save() {
      this.roomArr = this.roomArr.filter(item => {
        return item.name !== '';
      });
      let data = {
        hotel_id: this.hotel_id,
        group: [

        ]
      }
      this.roomArr.forEach(item => {
        let group = {
          room_num_group_id: item.id,
          room_num_id: [],
          room_num_group_name: item.name
        }
        for (let index = 0; index < item.children.length; index++) {
          group.room_num_id.push(item.children[index].id)
        }
        data.group.push(group)

      })
      console.log(data, '保存数据data');
      await EditRoomGroup(data).then(res => {
        console.log(res, '修改结果');
        if (res.data.code == 200) {
          this.$message.success('保存成功!')
          this.edit = false;
        }
      })
    },
    // 保存分组
    async addGroup(group, index) {
      console.log(group, index);
      if (group.name == '') {
        this.$message.success('房间号')
      }
      let data = {
        hotel_id: this.hotel_id,
        name: group.name
      }
      await RoomGroup(data, 'POST').then(res => {
        console.log(res, '保存分组结果');
        if (res.data.code == 200) {
          this.$message.success('添加成功 ')
          this.edit = false;
        }
      })
    },
    // 获取已经命名所属的房间 
    GetMoreRoom() {
      // console.log(this.roomArr);
      this.roomArr.forEach(async (item) => {
        let data = {
          hotel_id: item.hotel_id,
          room_num_group_id: item.id,
          page_rows: 100
        }
        // console.log(item);
        await GetRoomIDGroup(data).then(res => {
          let array = res.data.data
          for (let index = 0; index < array.length; index++) {
            item.children.push(array[index])
            // console.log(item.children);
          }
        })
      })

      console.log(this.roomArr, 'this.roomArr');
      // GetRoomIDGroup
    },
    // 获取未分组
    async GetRoomNoGroup() {
      let data = {
        hotel_id: this.hotel_id,
        room_num_group_id: 0
      }
      await GetRoomIDGroup(data).then(res => {
        this.ungroupedArr = res.data.data
        // console.log(res);
      })
    },

    // 获取所有分组
    async GetAllRoomGroup() {
      let data = {
        hotel_id: this.hotel_id,
        page_rows: 100
      }
      await RoomGroup(data, 'GET').then(res => {
        this.roomArr = res.data.data
        this.roomArr.forEach(item => {
          item.children = []
          // console.log(item);
        })
      })
      this.GetMoreRoom()
      this.GetRoomNoGroup()
      setTimeout(() => {
        this.edit = true
        this.edit = false
      }, 300);
    },

    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    // 开始编辑
    editGrouping() {
      this.groupA.pull = true
      this.groupA.put = true
      this.groupB.pull = true
      this.groupB.put = true
      this.edit = true
    },
    // 取消编辑
    cancelEdit() {
      this.roomArr = this.roomArr.filter(item => {
        return item.name !== '';
      });
      console.log(this.roomArr, 'this.roomArr');
      this.edit = false;
      this.groupA.pull = false
      this.groupA.put = false
      this.groupB.pull = false
      this.groupB.put = false
    },
    addGrouping() {
      this.roomArr.push({
        name: '',
        children: []
      })
    },
    // 删除分组
    delGrouping(group, index) {
      this.$confirm('是否确认删除该分组？')
        .then(_ => {
          console.log(group, index);
          let data = {
            hotel_id: this.hotel_id,
            id: group.id
          }
          RoomGroup(data, 'DELETE').then(res => {
            console.log(res);
            if (res.data.message == '删除成功!') {
              this.$message.success('删除成功')
              group.children.forEach(item => {
                this.ungroupedArr.push(item)
              });
              this.roomArr.splice(index, 1)
            }
          })

        })
        .catch(_ => {
        });


    }
  }
}
</script>

<style lang="scss" scoped>
.body::-webkit-scrollbar {
  display: none;
}

* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}

.content {

  // padding: 20px;
  .overflow-auto {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;

    .body {
      padding: 0 20px;
      width: calc(100% - 190px);
      overflow: auto;

    }
  }

  .flex_btn {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }

  .addGrouping {
    padding-left: 2%;
    width: 98%;
    height: 35px;
    border: 1px solid #dcdfe6;
    border-top: 0px;
  }

  .ungrouped {
    margin: 50px 0;
    // width: 95%;
    background-color: #f7f8fb;
    border: 1px solid #dcdfe6;

    .title {
      height: 38px;
      line-height: 32px;
      padding-top: 12px;
      padding-left: 24px;
      border-bottom: 1px solid #dcdfe6 !important;
    }

    // 没内容的
    .ungrouped_content {
      padding: 8px 24px;
      background-color: white;

      .room {
        padding: 5px 12px;
        color: #606266;
        width: 84px;
        height: 44px;
        font-size: 12px;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
        background: #f2f6fc;
        border: 0.5px solid #dcdfe6;
        border-radius: 2px;
      }
    }
  }

  .grouping {
    // width: 95%;
    // height: 400px;
    background-color: white;
    // overflow: auto;


    .title {
      height: 38px;
      line-height: 32px;
      padding-top: 12px;
      padding-left: 24px;
      background-color: #f7f8fb;
      border: 1px solid #dcdfe6;

      .name {
        display: inline-block;
        width: 30%;
      }

      .roomName {
        display: inline-block;
      }
    }

    // 有内容的
    .grouping_content {
      border: 1px solid #dcdfe6;
      display: flex;

      .name {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .roomName {

        width: 68%;
        display: inline-block;
        padding: 8px;
        border-left: 1px solid #dcdfe6 !important;

        .room {
          padding: 5px 12px;
          color: #606266;
          width: 84px;
          height: 44px;
          font-size: 12px;
          display: inline-block;
          margin-right: 8px;
          margin-bottom: 8px;
          background: #f2f6fc;
          border: 0.5px solid #dcdfe6;
          border-radius: 2px;

        }
      }
    }
  }
}
</style>